<template>
    <div class="flex_row_center m5 p10 ">
        <el-input clearable style="width: 80px;" v-model="ctx.cfg.name"/>
        <el-select style="width: 120px;" class="ml5" v-model="ctx.cfg.cfg.mode">
            <el-option v-for="(item, index) in GPIO_MODES" :key="index" :label="item.name" :value="item"/>
        </el-select>
        <el-select style="width: 120px;" v-if="ctx.cfg.cfg.mode.value==MODE_IN" class="ml5" v-model="ctx.cfg.cfg.cnf">
            <el-option v-for="(item, index) in GPIO_INPUT_CNFS" :key="index" :label="item.name" :value="item"/>
        </el-select>
        <el-select style="width: 120px;" v-if="ctx.cfg.cfg.mode.value!=MODE_IN" class="ml5" v-model="ctx.cfg.cfg.cnf">
            <el-option v-for="(item, index) in GPIO_OUTPUT_CNFS" :key="index" :label="item.name" :value="item"/>
        </el-select>
    </div>
</template>

<script lang="ts" setup>
import { GPIO_INPUT_CNFS, GPIO_MODES, GPIO_OUTPUT_CNFS, MODE_IN, type PinConfig } from '@/service/stm32f1/gpio';
import { reactive, watch } from 'vue';


interface Ctx {
    cfg: PinConfig
}

interface Props {
    modelValue: PinConfig,
}

const props = defineProps<Props>();
const ctx = reactive<Ctx>({
    cfg: props.modelValue
});
const emit = defineEmits<{
    (event: 'update:modelValue', data: PinConfig): void
}>();

watch(ctx, () => {
    emit('update:modelValue', ctx.cfg);
});

</script>
